<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>战队列表</title>
    <link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/base.css?v=14" />
    <link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/run.css?v=130" />
    <link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/mod.css?v=14" />
    <link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/list.css?v=14" />
    <link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/page.css?v=14" />
    <script src="{$staticHost}/static/js/jquery-1.8.3.min.js"></script>
    <script src="{$staticHost}/static/js/js.js"></script>
    <script src="{$staticHost}/static/js/mod.js"></script>
    <script src="{$staticHost}/static/js/iscroll.js"></script>
    <script src="{$staticHost}/static/js/pullToRefresh.js"></script>

    <style type="text/css">
    .dropload-up,.dropload-down{
      position: relative;
      height: 0;
      overflow: hidden;
      font-size: 12px;
      /* 开启硬件加速 */
      -webkit-transform:translateZ(0);
      transform:translateZ(0);
  }
  .dropload-down{
      height: 50px;
  }
  .dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
      height: 50px;
      line-height: 50px;
      text-align: center;
  }
  .dropload-load .loading{
      display: inline-block;
      height: 15px;
      width: 15px;
      border-radius: 100%;
      margin: 6px;
      border: 2px solid #666;
      border-bottom-color: transparent;
      vertical-align: middle;
      -webkit-animation: rotate 0.75s linear infinite;
      animation: rotate 0.75s linear infinite;
  }
  @-webkit-keyframes rotate {
      0% {
          -webkit-transform: rotate(0deg);
      }
      50% {
          -webkit-transform: rotate(180deg);
      }
      100% {
          -webkit-transform: rotate(360deg);
      }
  }
  @keyframes rotate {
      0% {
          transform: rotate(0deg);
      }
      50% {
          transform: rotate(180deg);
      }
      100% {
          transform: rotate(360deg);
      }
  }
  .zs { position: fixed; background: #fff; z-index: 20; width: 100%;top: 0 }
  #con-box { top: 37px }
  #banner { position: fixed; top: 0; left: 0; width: 100%; z-index: 20; background: #fff; }
  /*#jz*/ {padding-top: 105px}
</style>

    </head>
<body onload="loaded()">
 
  <section id="empty" class="empty-box" style="z-index:999;padding-top: :100px;">
    <div>
      <img src="{$staticHost}/static/images/bg/image1_03-min.png" >
      <p>还有没有创建战队哦</p>
      
    </div>
  </section>
  <div id="wrapper">
     <div class="search">
        <a>
          <img src="/static/images/icon/search.png"/>
          <input type="text" id="sq" name="sq" placeholder="搜索战队名称">
          <span id="sb" class="fr plr5">搜索</span>
        </a>
      </div>
      <div class="sort">
        <p>
          <button id="so" class="on" type="button">全部</button>
          <button id="zm" class="" type="button">
            招募人数
            <span class="color-blue">▼</span>
          </button>
          <button id="som" type="button">
            <span class="text">竞赛状态</span>
            <span class="color-blue dn">▼</span>
          </button>
          <!-- <button type="button">上海</button> -->
        </p>
       <!--  <p class=" mt10 line-tgray p5">
          招募中的战队 300支 　　
          招募结束的战队 1000支
        </p> -->
      </div>
      <ul class="club-list club_list"></ul>
  </div>
  <section id="cs" class="masklayer" >
   <div class="pao-tier" style="top: 20%;width: 90%;left:5%;">
      <span class="pao-close"></span>
      <div class="tier-colonel">
        <img id="img-box" src="">
        <span class="dib vm">队长：<i id="tz-box"></i></span>
        <p id="in-box" class="p10 f14 line-tgray mt10"></p>
       </div>
    </div>
  </section>
  </body>
<script id="club_list_tpl" type="text/html">
  <% for(var i = 0; i < list.length; i++) { %>
  <li>
    <a href="javascript:;" class="club_one db" data-cid="<%=list[i].id%>">
      <h6 class="club-<%=list[i].top_color%>"><%=list[i].top_desc%></h6>
      <img class="club-img" src="<%=list[i].image%>"/>
      <ol>
        <li><%=list[i].name%></li>
        <li>已招募  <%=list[i].user_num%>/30人</li>
      </ol>
    </a>
    <div>
      <% if(list[i].is_join == 2) { %>
      <button class="bg_gray color-white" type="button">已加入</button>
      <% } else if(list[i].is_join == 1) { %>
      <button class="bg_blue" type="button">待审核</button>
      <% } else {%>
      <button class="join_club" type="button" data-cid="<%=list[i].id%>">加入</button>
      <% } %>
      <img class="tz-img" src="<%=list[i].head_image%>" data-nickname="<%=list[i].nickname%>" data-content="<%=list[i].leaderIntroduce%>" />
    <span class="color_gray">队长</span>
    </div>
    <p>推荐原因：<%=list[i].bottom_desc%></p>
  </li>
  <% } %>
</script>
<script type="text/javascript">
  var uid = "{$uid}";
  var sup = typeof jw == "object";
  var myScroll;
  function loaded () {
    myScroll = new IScroll('#wrapper', { bounceEasing: 'elastic', bounceTime: 100 });
  }

  var sq = '';
  var page = 1;
  var userNumOrder = 1;
  var statusOrder = 0;

  $(function() {
      Load();
      //$.get('{$appHost}/paome_webIndex/getClubList?id=' + beginCid + '&offset=1', renderClubList);
      $('.join_club').live('click', function(){
          nologin();
          var club_id = $(this).attr('data-cid') * 1;
          var o = this;
          if(club_id > 0) {
              $.post('{$appHost}/paome_webIndex/joinClub', {'clubId': club_id}, function(res){
                  var res = JSON.parse(res);
                  if(res.error != undefined) {
                      alert(res.error.text);
                  } else if(res.result != undefined) {
                      if(res.result.is_success * 1 == 1) {
                          $(o).addClass('bg_blue').text('待审核');
                          $(o).unbind("click");
                      }
                  }
              });
          }
      });

      $('.club_one').live('click', function(){
          var club_id = $(this).attr('data-cid') * 1;
          if(club_id) {
              window.location.href="clubDetailNo?clubId=" + club_id;
          } 
      });

      $('#sb').click(function(){
        sq = $('#sq').val();
        $('.club_list li').remove();
        page = 1;
        Load();
      });

      $('#so').click(function(){
        page = 1;
        statusOrder = 0;
        $('.club_list li').remove();
        $('#som .color-blue').text('▼').hide();
        $('#som .text').text('竞赛状态');
        Load();
      });

      $('#zm').click(function(){
        page = 1;
        userNumOrder = userNumOrder == 1 ? 0 : 1;
        $('#zm span').text(userNumOrder == 1 ? '▼' : '▲');
        $('.club_list li').remove();
        Load();
      });

      $('#som').click(function(){
        page = 1;
        statusOrder = statusOrder == 0 ? 1 : (statusOrder == 1 ? 2 : 1);
        $('#som .color-blue').text(statusOrder == 1 ? '▼' : '▲').show();
        $('#som .text').text(statusOrder == 1 ? '未开始' : '进行中');
        $('.club_list li').remove();
        Load();
      });

      $('#sq').blur(function(){
        $('#sb').click();
      });
  });

  function renderClubList(data) {
      data = JSON.parse(data);
      if(data.result.list != undefined && data.result.list.length > 0) {
        var clubList = {'list': []};
        var dl = data.result.list;
        for(var i = 0; i < dl.length; i++) {
          var club = {
              'id': dl[i].id,
              'image': dl[i].image,
              'name': dl[i].title,
              'user_num': dl[i].userNum,
              'nickname': dl[i].nickname,
              'leaderIntroduce': dl[i].leaderIntroduce,
              //'head_uid': dl[i].head_uid,
              'head_image': dl[i].leaderImage ? dl[i].leaderImage : '/static/images/bg/group_image_nor-min.png',
              'is_join': dl[i].status * 1,
              'top_color': dl[i].userNum * 1 < 5 ? 'blue' : 'pink',
              'top_desc': dl[i].userNum * 1 < 5 ? '满足5人就可以比赛啦' : '竞赛开始即可进行比赛',
              'bottom_desc': dl[i].userNum * 1 < 5 ? '优质战队，队长带队经验丰富' : '竞赛马上开始，就差你啦',
          };
          club.user_num = club.user_num < 10 ? '0' + club.user_num : club.user_num;
          clubList.list.push(club);
        }

        page++;

        var html = template('club_list_tpl', clubList);
         
        $(".pao-close").click(function(){
          $(".masklayer").hide();
        })

        if(page > 0) {
          $('.club_list').append(html);
        } else {
          $('.club_list').html(html);
        }

        $(".tz-img").on('click',function(){
          var header = $(this).attr('src');
          var nickname = $(this).attr('data-nickname');
          var introduce = $(this).attr('data-content');
          if(introduce) {
            $("#cs").show();
            $("#img-box").attr("src",header)
            $("#tz-box").html(nickname)
            $("#in-box").text(introduce)
          }
        })
      }
  }

  var time = new Date(new Date().getTime());
    time = (time.getFullYear()+"-"+(time.getMonth()+1)+"-"+time.getDate()+" "+time.getHours()+":"+time.getMinutes());
    var downTime = new Date(new Date().getTime());
    downTime = (downTime.getFullYear()+"-"+(downTime.getMonth()+1)+"-"+downTime.getDate()+" "+downTime.getHours()+":"+downTime.getMinutes());

  var isload = false;

  function Load(){
      $('#wrapper').dropload({
          scrollArea : window,
          loadDownFn : function(me){
            if(isload) {
              return;
            }
            isload = true;
            $.ajax({
                type: 'GET',
                url: '{$appHost}/paome_webIndex/getClubList?page=' + page + '&offset=10&clubName=' + sq + '&userNumOrder=' + userNumOrder + '&statusOrder=' + statusOrder,
                success: function(data){
                    var fndata = JSON.parse(data);
                    if(fndata.result.list.length > 0) {
                        renderClubList(data);
                    }else{
                      if(page < 2) {
                        $('#empty').show();
                      }
                      $('.pullUpLabel').html("已加载完毕");
                      me.noData();me.lock();
                    }
                    // 为了测试，延迟1秒加载
                    me.noData();
                    me.resetload();
                    isload = false;
                    $('.dropload-down').remove();
                  },
                  error: function(xhr, type){
                      alert('Ajax error!');
                      // 即使加载出错，也得重置
                      me.resetload();
                      isload = false;
                      $('.dropload-down').remove();
                  }
              });
          }
      }); 
    }
    $(".search").click(function(){
       $(".search a").addClass('on')
    })
     $(".search input").blur(function(){
       $(".search a").removeClass('on')
    })   
  function nologin() {
      if(!uid){
          if(!sup){
              window.location.href="http://mobile.hupu.com/download/joggers?r=share"
          }else{
              window.location.href="joggers://login";
          }
          return;
      }
  }
</script>
<script src="{$staticHost}/static/js/dropload.js"></script> 


</html>